<template>
  <div class="dashboard">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-suffix=":" ref="formInlineRef">
      <el-form-item label="车牌号码"><el-input v-model="formInline.carNumber" placeholder="请输入车牌号码"
          clearable></el-input></el-form-item>
      <el-form-item label="车主姓名"><el-input v-model="formInline.personName" placeholder="请输入车主姓名"
          clearable></el-input></el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.cardStatus" placeholder="请选择状态" clearable>
          <el-option v-for="item in cardStatusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="btns"><el-button size="small" @click="resetForm('formInlineRef')">重置</el-button> <el-button size="small" type="primary"
          @click="fetchTableData">查询</el-button></el-form-item>
    </el-form>
    <div class="mb20">
      <el-button size="small" @click="addDialogFormData.dialogVisible = true">添加月卡</el-button>
      <el-button type="primary" size="small"  @click="delCar()">批量删除</el-button>
    </div>
    <v-table stripe border v-bind="tableObj"  max-height="400"  row-key="id" @fetchTableData="fetchTableData" ref="vTableRef"
      @selection-change="selectRow">
      <template v-slot:operate="slotProps">
        <el-button type="text" @click="rechargeGetDetail(slotProps.row.id)">续费</el-button>
        <el-button type="text">查看</el-button>
        <el-button type="text" @click="editGetDetail(slotProps.row.id)">编辑</el-button>
        <el-popconfirm title="确定删除月卡吗？" @confirm="delCar(slotProps.row.id)"><el-button slot="reference"
            type="text" style="margin-left:10px">删除</el-button></el-popconfirm>

      </template>
    </v-table>

    <AddAndEditMonthCardUI :dialogForm="addDialogFormData" @resetForm="addResetFrom" @comfirmForm="addComfirmForm" />

    <AddAndEditMonthCardUI :dialogForm="editDialogFormData" @resetForm="editResetFrom" @comfirmForm="editComfirmForm" />

    <AddAndEditMonthCardUI :dialogForm="rechargeDialogFormData" :formItems="rechargeFormItems"  @resetForm="rechargeResetFrom" @comfirmForm="rechargeComfirmForm" />
  </div>
</template>

<script>
import { getListAPI, delAPI } from '@/apis/card'
import AddAndEditMonthCardUI from './comps/AddAndEditMonthCardUI.vue'
import MonthCardAdd from './comps/MonthCardAdd'
import MonthCardEdit from './comps/MonthCardEdit'
import MonthCardRecharge from './comps/MonthCardRecharge'
export default {
  name: 'CarMonthCardPage',
  components: { AddAndEditMonthCardUI },
  mixins: [MonthCardAdd, MonthCardEdit,MonthCardRecharge],
  data() {
    return {
      tableObj: {
        tableColumn: Object.freeze([
          { prop: 'personName', label: '车主名称' },
          { prop: 'phoneNumber', label: '联系方式' },
          { prop: 'carNumber', label: '车牌号' },
          { prop: 'carBrand', label: '车辆品牌' },
          { prop: 'totalEffectiveDate', label: '剩余有效期' },
          { prop: 'cardStatus', label: '状态', formatter: (r, c, v) => (this.cardStatusList[v] || {}).name },
          { prop: 'operate', label: '操作', slotName: 'operate', headSlotName: 'headOperate', fixed: "right", width: "180" },
        ]),
        tableData: [],
        pagination: {
          currentPage: 1,
          pageSize: 5,
          total: 0,
        },
      },
      dict: [],
      formInline: {
        carNumber: '',
        personName: '',
        cardStatus: ''
      },
      rowIds: [], //多选存储tableRow IDs


    }
  },
  beforeCreate() {
    this.cardStatusList = [{ id: 0, name: '可用' }, { id: 1, name: '已过期' }, { id: -1, name: '全部' }]
  },
  methods: {
    async fetchTableData() {
      const { currentPage, pageSize } = this.tableObj.pagination
      const { carNumber, personName, cardStatus } = this.formInline
      const params = {
        page: currentPage,
        pageSize: pageSize
      }
      carNumber && (params.carNumber = carNumber)
      personName && (params.personName = personName)
      cardStatus !== '' && cardStatus !== -1 && (params.cardStatus = cardStatus)

      const r = await getListAPI(params)
      const data = r.data
      this.tableObj.tableData =Object.freeze(data.rows)
      this.tableObj.pagination.total = data.total
    },
    resetForm(formNameRef) {
      // this.$refs[formNameRef].resetFields() //失效了
      this.formInline = {
        carNumber: '',
        personName: '',
        cardStatus: ''
      }
    },
    async delCar(id) {
      const isMultipleSelect = !Boolean(id) //有id参数是单选，多选删除按钮是无参的
      //点击了批量删除按钮
      if (isMultipleSelect) {
        if (!this.rowIds.length) return this.$message.warning('请先勾选月卡')
        id = this.rowIds.join(',')
      }
      console.log('id',id)
      try {
        await delAPI(id)
        this.$message.success(`${isMultipleSelect ? '批量' : ''}删除成功`)
        this.rowIds.length=0 //删除成功需要把ids记录数组给清空
        this.fetchTableData()
      } catch (error) {
        this.$message.error(`${isMultipleSelect ? '批量' : ''}删除失败`)
      }


    },
    selectRow(r) {
      this.rowIds = r.map(item => item.id)
    },
  },
  created() {
    this.fetchTableData()
  },
  mounted() { }
}
</script>

<style lang="scss" scoped>
.el-form.demo-form-inline {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 340px) 300px 1fr;
  grid-auto-rows: auto;

  .btns {
    justify-self: flex-end;
  }

}
</style>